<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getSumInventory } from '@/api/interface/web/product'

const fullscreenLoading = ref(false)

const sumInventory: any = ref([])
const getSumInventoryFun = () => {
  getSumInventory({}).then((res: any) => {
    console.log(transformInventoryData(res))
    sumInventory.value = transformInventoryData(res)
    getSpanArr(sumInventory.value)
  })
}

onMounted(() => {
  getSumInventoryFun()
})

function transformInventoryData(data: any) {
  // 按款号和颜色分组
  const groupedData: any = {}

  data.forEach((item: any) => {
    const key = `${item.styleCode}-${item.color}`
    if (!groupedData[key]) {
      groupedData[key] = {
        styleCode: item.styleCode,
        name: item.name,
        color: item.color,
        sizes: {},
        total: 0,
        sumAllInventory: item.sumAllInventory,
      }
    }

    // 累加各尺码库存
    groupedData[key].sizes[item.productSize] = item.sumInventory
    groupedData[key].total += item.sumInventory
  })

  // 转换为数组并排序
  const result = Object.values(groupedData).sort((a: any, b: any) => {
    if (a.styleCode !== b.styleCode) {
      return a.styleCode.localeCompare(b.styleCode)
    }
    return a.color.localeCompare(b.color)
  })

  return result
}

// 计算合并的配置
const spanArr: any = ref([])
const pos: any = ref(0)

const getSpanArr = (data: any) => {
  spanArr.value = []
  pos.value = 0

  for (let i = 0; i < data.length; i++) {
    if (i === 0) {
      spanArr.value.push(1)
      pos.value = 0
    } else {
      // 如果当前行的款号和名称与上一行相同
      if (data[i].styleCode === data[i - 1].styleCode && data[i].name === data[i - 1].name) {
        spanArr.value[pos.value] += 1
        spanArr.value.push(0)
      } else {
        spanArr.value.push(1)
        pos.value = i
      }
    }
  }
}

// 合并单元格方法
const objectSpanMethod = ({ rowIndex, columnIndex }: any) => {
  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 10) {
    // 款号、名称、款号总库存列
    const _row = spanArr.value[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return {
      rowspan: _row,
      colspan: _col,
    }
  }
}
</script>

<template>
  <BasePageWrapper v-loading.fullscreen="fullscreenLoading">
    <BasePage>
      <template #title>库存统计</template>
      <el-table
        ref="dragTableRef"
        :data="sumInventory"
        :span-method="objectSpanMethod"
        class="custom-table"
        row-key="id"
        border
        default-expand-all
        row-class-name="move-el"
      >
        <el-table-column prop="name" align="left" label="商品名称"> </el-table-column>
        <el-table-column prop="styleCode" align="left" label="款号"> </el-table-column>
        <el-table-column prop="color" align="left" label="颜色"> </el-table-column>
        <el-table-column prop="sizes.S" align="left" label="S"> </el-table-column>
        <el-table-column prop="sizes.M" align="left" label="M"> </el-table-column>
        <el-table-column prop="sizes.L" align="left" label="L"> </el-table-column>
        <el-table-column prop="sizes.XL" align="left" label="XL"> </el-table-column>
        <el-table-column prop="sizes.2XL" align="left" label="2XL"> </el-table-column>
        <el-table-column prop="sizes.3XL" align="left" label="3XL"> </el-table-column>
        <el-table-column prop="total" align="left" label="合计"> </el-table-column>
      </el-table>
    </BasePage>
  </BasePageWrapper>
</template>

<style lang="scss" scoped>
.page-content-container {
  @include rect(100%, 100%);
  @include flex(row, space-between, flex-start);
  .left {
    @include rect(220px, 100%);
    box-sizing: border-box;
    padding-bottom: 24px;
  }
  .right {
    @include rect(calc(100% - 240px), 100%);
    :deep(.role-tag) {
      margin-right: 10px;
      margin-top: 5px;
      margin-bottom: 5px;
    }
    .icon-text-box {
      display: flex;
      justify-content: center;
      align-items: center;

      .icon-text {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 24px;
        cursor: pointer;
        .icon {
          margin-right: 5px;
          font-size: 16px;
        }
        .text {
          width: 2em;
        }
        .text.add {
          min-width: 4em;
        }
      }
      .icon-text:last-child {
        margin-right: 0;
      }
      .icon-text.info {
        color: var(--theme-color);
      }
      .icon-text.delete {
        color: #f56c6c;
      }
    }
  }
}
</style>
